<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js"><span id='global-property-'>/**
</span> * @ignore
 * mask extension for kissy
 * @author yiminghe@gmail.com
 */
KISSY.add(&quot;overlay/extension/mask&quot;, function (S, Node) {
    var UA = S.UA,
        ie6 = (UA['ie'] === 6),
        $ = Node.all;

    function docWidth() {
        return  ie6 ? (&quot;expression(KISSY.DOM.docWidth())&quot;) : &quot;100%&quot;;
    }

    function docHeight() {
        return ie6 ? (&quot;expression(KISSY.DOM.docHeight())&quot;) : &quot;100%&quot;;
    }

    function initMask(self) {
        var maskCls = self.view.getBaseCssClasses('mask'),
            mask = $(&quot;&lt;div &quot; +
                &quot; style='width:&quot; + docWidth() + &quot;;&quot; +
                &quot;left:0;&quot; +
                &quot;top:0;&quot; +
                &quot;height:&quot; + docHeight() + &quot;;&quot; +
                &quot;position:&quot; + (ie6 ? &quot;absolute&quot; : &quot;fixed&quot;) + &quot;;'&quot; +
                &quot; class='&quot; +
                maskCls +
                &quot;'&gt;&quot; +
                (ie6 ? &quot;&lt;&quot; + &quot;iframe &quot; +
                    &quot;style='position:absolute;&quot; +
                    &quot;left:&quot; + &quot;0&quot; + &quot;;&quot; +
                    &quot;top:&quot; + &quot;0&quot; + &quot;;&quot; +
                    &quot;background:red;&quot; +
                    &quot;width: expression(this.parentNode.offsetWidth);&quot; +
                    &quot;height: expression(this.parentNode.offsetHeight);&quot; +
                    &quot;filter:alpha(opacity=0);&quot; +
                    &quot;z-index:-1;'&gt;&lt;/iframe&gt;&quot; : &quot;&quot;) +
                &quot;&lt;/div&gt;&quot;)
                .prependTo(&quot;body&quot;);
        /*
         点 mask 焦点不转移
         */
        mask['unselectable']();
        mask.on(&quot;mousedown&quot;, function (e) {
            e.preventDefault();
        });
        return mask;
    }

<span id='KISSY-Overlay-Extension-Mask'>    /**
</span>     * @class KISSY.Overlay.Extension.Mask
     * Mask extension class. Make component to be able to show with mask.
     */
    function Mask() {
    }

    Mask.ATTRS = {
<span id='KISSY-Overlay-Extension-Mask-cfg-mask'>        /**
</span>         * Whether show mask layer when component shows and effect
         *
         * for example:
         *
         *      {
         *          // whether hide current component when click on mask
         *          closeOnClick: false,
         *          effect: 'fade', // slide
         *          duration: 0.5,
         *          easing: 'easingNone'
         *      }
         *
         * @cfg {Boolean|Object} mask
         */
<span id='global-property-mask'>        /**
</span>         * @ignore
         */
        mask: {
            value: false
        },
<span id='KISSY-Overlay-Extension-Mask-property-maskNode'>        /**
</span>         * Mask node of current component.
         * @type {KISSY.NodeList}
         * @property maskNode
         * @readonly
         */
<span id='global-property-maskNode'>        /**
</span>         * @ignore
         */
        maskNode: {
        }
    };

    var NONE = 'none',
        effects = {fade: [&quot;Out&quot;, &quot;In&quot;], slide: [&quot;Up&quot;, &quot;Down&quot;]};

    function setMaskVisible(self, shown) {
        var maskNode = self.get('maskNode'),
            hiddenCls = self.view.getBaseCssClasses('mask-hidden');
        if (shown) {
            maskNode.removeClass(hiddenCls);
        } else {
            maskNode.addClass(hiddenCls);
        }
    }

    function processMask(mask, el, show, self) {

        var effect = mask.effect || NONE;

        setMaskVisible(self, show);

        if (effect == NONE) {
            return;
        }

        var duration = mask.duration,
            easing = mask.easing,
            m,
            index = show ? 1 : 0;

        // run complete fn to restore window's original height
        el.stop(1, 1);

        el.css('display', show ? NONE : 'block');

        m = effect + effects[effect][index];

        el[m](duration, function () {
            el.css('display', '');
        }, easing);
    }

    function afterVisibleChange(e) {
        var v,
            self = this,
            maskNode = self.get('maskNode');
        if (v = e.newVal) {
            var elZIndex = Number(self.$el.css('z-index'));
            if (!isNaN(elZIndex)) {
                maskNode.css('z-index', elZIndex);
            }
        }
        processMask(self.get('mask'), maskNode, v, self);
    }

    Mask.prototype = {
        __renderUI: function () {
            var self = this;
            if (self.get('mask')) {
                self.set('maskNode', initMask(self));
            }
        },

        __bindUI: function () {
            var self = this,
                maskNode,
                mask;
            if (mask = self.get(&quot;mask&quot;)) {
                maskNode = self.get('maskNode');
                if (mask['closeOnClick']) {
                    maskNode.on(Node.Gesture.tap, self.close, self);
                }
                self.on('afterVisibleChange', afterVisibleChange);
            }
        },

        __destructor: function () {
            var mask;
            if (mask = this.get(&quot;maskNode&quot;)) {
                mask.remove();
            }
        }
    };

    return Mask;
}, {
    requires: [&quot;node&quot;]
});</pre>
</body>
</html>
